<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>向商户付款</title>
    <link rel="stylesheet" href="{{asset('/payviews/css/style.css')}}">
    <link rel="stylesheet" href="{{asset('/phone/css/swiper.min.css')}}">
    <script type="text/javascript" src="{{asset('/phone/js/Screen.js')}}"></script>
    <style>
        .pay_money {
            border: 1px solid #20c020;
        }
        .swindle {
            width: 100% !important;
            height: .6rem !important;
            font-size: .24rem !important;
        }

        .keyboard ul li.swindle:after {
            font-size: .24rem !important;
        }
    </style>
</head>
<!-- 
	通用说明： 
	1.模块的隐藏添加class:hide;
	2.body标签默认绑定ontouchstart事件，激活所有按钮的:active效果
-->
<body>
    <form>
        <div class="payment">
            <div class="title">
                <img src="{{url('/payviews/img/touxiang.png')}}">{{$data['store_name']}}
            </div>
            <div class="pay_money">
                <span>支付金额</span>
                <i></i>
                <div class="ipt"> ￥ <span id="total_amount"></span></div>
            </div>
            <div class="remark">
                <textarea class="remark_con" id="remark" placeholder="添加备注(30字以内)"></textarea>
                <img src="{{url('/payviews/img/qingkong.png')}}" class="quxiao">
            </div>
        </div>
        <input type="hidden" id="csrf_token" value="{{csrf_token()}}">
        <input type="hidden" id="store_id" value="{{$data['store_id']}}">
        <input type="hidden" id="merchant_id" value="{{$data['merchant_id']}}">
        <input type="hidden" id="open_id" value="{{$data['open_id']}}">
    </form>
    <div class="keyboard">
        <ul>
            <li data="1"></li>
            <li data="2"></li>
            <li data="3"></li>
            <li class="confirm" data="确认"><input type="button" id="tijiao"></li>
            <li data="4"></li>
            <li data="5"></li>
            <li data="6"></li>
            <li data="7"></li>
            <li data="8"></li>
            <li data="9"></li>
            <li data="0"></li>
            <li data="."></li>
            <li class="del"><img src="{{url('/payviews/img/tui.png')}}"></li>
        </ul>
    </div>
    <div class="load-hidden"></div>
    <div class="load-hiddenbg" style="display: none"></div>

    <!-- 提示 -->
    <div class="mask" style="display: none;">
        <div class="popup_bg"></div>
        <div class="result_layer" id="accountMsg">
            <div style="padding: .5rem 0;">
                <p style="font-size:.35rem;height: .6rem;font-weight: 500;">提示</p>
                <p class="tip"></p>
            </div>
            <a class="qr" style="width:100%;border-left:1px solid #ccc;color:#219aff">我知道了</a>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="{{asset('/phone/js/jquery-2.1.4.js')}}"></script>
<script src="{{asset('/phone/js/fastclick.js')}}"></script>
<script>
    let jump_success = "{{url('weixin/order/success')}}";
    let jump_fail = "{{url('weixin/order/fail')}}";
    let show = localStorage.getItem("show");
    let onBridgeReady = function () {
        $.post("{{url('/api/merchant/qr_pay')}}", {
            "total_amount": $("#total_amount").html(),
            "remark": $("#remark").val(),
            "store_id": $("#store_id").val(),
            "merchant_id": $("#merchant_id").val(),
            "_token": $("#csrf_token").val(),
            "open_id": $('#open_id').val(),
            "ways_type": '40001'
        }, function (back) {
            $('.load-hidden').removeClass('loading');
            $('.load-hiddenbg').hide();
            let data_url = "&total_amount=" + $("#total_amount").html() + "&store_id=" + $("#store_id").val();
            if (back.status == 1) {
                window.location.href = back.data.code_url;
            } else {
                $('.mask').show();
                data_url = data_url + "&ad_p_id=4";
                window.location.href = "{{url('page/pay_errors?message=')}}" + back.message + data_url;
            }
        }, "json");
    }

    document.documentElement.addEventListener('dblclick', function (e) {
        e.preventDefault();
    });
    document.addEventListener('touchmove', function (event) {
        event.preventDefault();
    }, false);
    document.addEventListener('touchmove', function (e) {
        e.preventDefault()
    }, false);

    $(function () {
        FastClick.attach(document.body);
        if (show == 1) {
            $('.show').hide();
        } else {
            $('.show').show();
        }
        $('.keyboard ul li').on("touchend", function () {
            var _this = $(this);
            var num = _this.attr('data');
            var $money = $("#total_amount");
            var oldValue = $money.html();
            var newValue = "";
            if (_this.hasClass('del')) {
                newValue = oldValue.substring(0, oldValue.length - 1);
                if (newValue == "") {
                    newValue = "";
                    $('.confirm').removeClass('green');
                }
                $money.html(newValue);
            } else {
                if (oldValue == "0.00") {
                    if (num != ".") {
                        oldValue = "";
                    }
                }
                if (oldValue == "0") {
                    if (num != ".") {
                        oldValue = "";
                    }
                }
                if (oldValue == "") {
                    if (num == ".") {
                        oldValue = "0.";
                    }
                }
                newValue = oldValue + num;
                //控制输入的值为五位数和2位小数点
                reg = /^\d{0,8}(\.\d{0,2})?$/g;
                if (reg.test(newValue)) {
                    $money.html(newValue);
                    $('.confirm').addClass('green');
                } else {
                    $money.html(oldValue);
                    $('.confirm').addClass('green');
                }
            }
        });
        $('.pay_money').click(function () {
            $('.keyboard').show();
        });
        $(".remark_con").focus(function () {
            $('.keyboard').hide();
        });
        $('.remark_con').blur(function () {
            $('.keyboard').show();
        });
        $(".remark_con").bind("input propertychange", function () {
            var len = $(this).val().length;
            var max = 30;
            if (len > max) {
                var value = $(this).val().substring(0, max);
                $(this).val(value);
            }
        });
        $('.quxiao').click(function () {
            $('.remark_con').val('');
        });
        // 触发支付事件
        $('#tijiao').click(function () {
            $('.load-hidden').addClass('loading');
            $('.load-hiddenbg').show();
            $(this).attr('disabled', 'disabled');
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        })
        $('.qr').click(function () {
            $('.mask').hide();
            location.reload();
        });
        $('.qd').click(function () {
            $('.show').hide();
            localStorage.setItem("show", '1');
        });
    });
</script>
